<template>
  <view class="base-box" :style="{background: bgPageColor}">
    <slot name="header"></slot>
    <view class="content" :style="style">
      <scroll-view class="scroll-box" scroll-y="true" :refresher-triggered="refresherTriggered"
                   :refresher-enabled="refresherEnabled" :refresher-background="refresherBg" @scrolltolower="more"
                   @refresherrefresh="reload">
        <slot :dataList="dataList" :dataInfo="dataInfo"></slot>
      </scroll-view>
    </view>
    <view class="fixed-btn" :style="{background: bgPageColor, padding: footerPadding}">
      <slot name="footer"></slot>
      <view class="safe-box"></view>
    </view>
  </view>
</template>

<script setup>

const emits = defineEmits(['reload', 'more', 'success'])
const props = defineProps({
  padding: {
    type: String,
    default: '0rpx'
  },
  bgPageColor: {
    type: String,
    default: '#F6F7FB'
  },
  refresherBg: {
    type: String,
    default: 'rgba(0,0,0,0)'
  },
  footerPadding: {
    type: String,
    default: '0'
  },
  refresherEnabled: {
    type: Boolean,
    default: false
  },
  apiObj: {
    type: Function,
    default: null
  },
  params: {
    type: Object,
    default: null
  },
  type: {
    type: String,
    default: 'list'
  },
  customize: {
    type: Boolean,
    default: false
  },
  autoLoad: {
    type: Boolean,
    default: true
  },
  showNavBar: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: ''
  },
  footerBgColor: {
    type: String,
    default: 'rgba(0,0,0,0)'
  }
})
const style = computed(() => {
  return {
    padding: props.padding,
    background: props.bgPageColor
  }
})
const refresherTriggered = ref(false)

const options = ref({})
const optionsCopy = ref({
  page: 1,
  page_size: 10,
  total: 0
})
const dataList = ref([])
const dataInfo = ref([])
// 下拉刷新
const reload = async () => {
  console.log('reload')
  refresherTriggered.value = true
  await reloadHandlr()
}

const refresh = () => {
  reloadHandlr()
}
const reloadHandlr = async () => {
  emits('reload')
  if (props.customize) {
    console.log('customize')
    setTimeout(() => {
      closeRefresher()
    }, 2000)
  } else {
    if (props.type === 'list') {
      console.log('list')
      options.value = qly.tool.deepCopy(optionsCopy.value)
      options.value.page = 1
      dataList.value = []
      await nextTick()
      getList()
    } else {
      getDataInfo()
    }
  }
}

// 加载更多
const more = async () => {
  if (props.customize) {
    emits('more')
  } else {
    if (props.type === 'list') {
      if (options.value.total > dataList.value.length) {
        options.value.page += 1
        getList()
      } else {
        console.log('到底了')
      }
    } else {
      emits('more')
    }
  }
}

// 关闭加载
const closeRefresher = async () => {
  refresherTriggered.value = false
}

// 获取分页数据
const getList = async () => {
  const params = qly.tool.deepCopy(props.params)
  const data = {
    ...options.value,
    ...params
  }
  const res = await props.apiObj(data)
  if (res.code === 1) {
    console.log('dataList', dataList.value)

    dataList.value.push(...res.data.list)
    options.value.total = res.data.total
    emits('success', res.data)
  } else {
    qly.dialog.apiError(res).catch()
  }
  closeRefresher()
}

// 获取详情数据
const getDataInfo = async () => {
  if (props.apiObj) {
    console.log('props.params', props.params)
    const res = await props.apiObj(props.params)
    console.log('dataInfo', res)
    if (res.code === 1) {
      dataInfo.value = res.data
      emits('success', res.data)
    } else {
      // qly.dialog.apiError(res).catch()
    }
  }

  setTimeout(() => {
    closeRefresher()
  }, 2000)
}

watch(() => props.params, (newVal, oldVal) => {
  if (props.autoLoad && props.apiObj) {
    console.log('触发了监听')
    options.value = {...options.value, ...newVal}
    reloadHandlr()
  }
}, {
  deep: true,
  immediate: true
})

onMounted(() => {
  options.value = qly.tool.deepCopy(optionsCopy.value)
})
defineExpose({
  reload,
  refresh,
  more,
  closeRefresher
})
</script>
<style scoped lang="scss">

.base-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .content {
    flex: 1;
    overflow: scroll;
    box-sizing: border-box;
  }
}

.scroll-box {
  height: 100%;
}

.safe-top {
  height: 12rpx;
}

.safe-box {
  /* 给底部预留安全区域空间 */
  height: env(safe-area-inset-bottom);
  /* 兼容旧版 iOS，可添加 fallback */
  height: constant(safe-area-inset-bottom);
}
</style>
